//包含图片压缩、图片旋转、添加水印功能
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();

//file为本地图片路径或base64
export default class CanvasImg {
  constructor(file, options) {
    this.options = options;
    this.imgType = 'image/png'; //图片类型
    // 创建Canvas对象(画布)
    this.file = file;//file包含"data:image/jpeg;base64,"
    this.canvas = canvas;
    // 获取对应的CanvasRenderingContext2D对象(画笔)
    this.ctx = ctx;
    // 创建新的图片对象
    this.img = img;
    this.size = options && options.size ? options.size : 400;
    this.base64 = '';
  }

  drawImage(file, deg, size) {
    //第一个参数file为图片的本地地址或base64
    //第二个参数为图片要旋转的角度，默认0(不旋转)
    //第三个参数为图片压缩后的尺寸，默认400
    if (file !== undefined) {
      this.file = file;
    }
    if (deg === undefined) {
      deg = 0;
    }
    deg = deg % 360;
    if (deg > 0) {
      deg = deg - 360;
    }
    var flag;
    if (size !== undefined) {
      this.size = size;
    }
    this.img.src = this.file;
    return new Promise((resolve, reject) => {
      this.img.onload = () => {
        var imgWidth = this.img.width
        var imgHeight = this.img.height

        if (imgWidth > imgHeight && imgWidth > this.size) {
          imgWidth = this.size
          imgHeight = Math.ceil((this.size * this.img.height) / this.img.width)
        } else if (imgWidth < imgHeight && imgHeight > this.size) {
          imgWidth = Math.ceil((this.size * this.img.width) / this.img.height)
          imgHeight = this.size
        }

        if ((deg < -45 && deg >= -135) || deg < -225 && deg >= -315) {
          flag = 1;//表示旋转
          this.canvas.width = imgHeight;
          this.canvas.height = imgWidth;

        } else {
          flag = 2;
          this.canvas.width = imgWidth;
          this.canvas.height = imgHeight;
        }

        this.ctx.font = this.options && this.options.font ? this.options.font : "18px microsoft yahei";
        this.ctx.fillStyle = this.options && this.options.fillStyle ? this.options.fillStyle : "black";

        this.ctx.save();
        this.ctx.translate(this.canvas.width / 2, this.canvas.height / 2);
        this.ctx.rotate((deg * Math.PI) / 180);
        this.ctx.translate(-this.canvas.width / 2, -this.canvas.height / 2);

        if (flag === 1) {
          let offset = (imgHeight - imgWidth) / 2;
          this.ctx.drawImage(this.img, offset, -offset, this.canvas.height, this.canvas.width);
        } else {
          this.ctx.drawImage(this.img, 0, 0, this.canvas.width, this.canvas.height);
        }
        this.ctx.restore();
        resolve(this);
      }
    })

  }
  //获取base64
  getBase64() {
    // 将绘制完成的图片重新转化为base64编码，0.92为默认压缩质量
    let dataURL = this.canvas.toDataURL(this.imgType, 0.92);
    this.base64 = dataURL.split("base64,")[1] // 截取图片流格式
    return this.base64;
  }
  // 设置水印文字样式
  setFillStyle(options) {
    if (options === undefined) {
      return;
    }
    if (options.font) {
      this.ctx.font = options.font;
    }
    if (options.fillStyle) {
      this.ctx.fillStyle = options.fillStyle;
    }
  }
  //添加水印文字方法
  fillText(textArr) {
    if (Array.isArray(textArr)) {
      textArr.forEach(item => {
        this.ctx.fillText(item.text, item.x, item.y);
      })
    } else {
      this.ctx.fillText(textArr.text, textArr.x, textArr.y);
    }
  }


}